<template>
  <div :id="id"
       :style="{ width: wh.width, height: wh.height }"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "mycharts",
    },
    wh: {
      type: Object,
      default: () => ({
        width: "100%",
        height: "360px",
      }),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    options: {
      handler(val) {
        if (val) {
          this.drawChart();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.drawChart();
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    drawChart() {
      this.myChart = this.$echarts.init(document.getElementById(this.id));
      this.myChart.setOption(this.options);

      //   this.$nextTick(() => {
      //     this.myChart.resize();
      //   });
      window.addEventListener("resize", () => {
        // 自动渲染echarts
        this.myChart.resize();
      });
    },
  },
};
</script>

<style></style>
